<template>
  <el-dialog
    :title="`${drawerProps.title}需求`"
    v-model="drawerVisible"
    :draggable="true"
    :overflow="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    top="30px"
    width="1400px"
    :destroy-on-close="true"
  >
    <el-form
      ref="ruleFormRef"
      style="height: 70vh; overflow: hidden auto"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
    >
      <el-row>
        <el-col :span="16">
          <group-title title="基本信息"></group-title>
          <el-row>
            <form-item title="需求摘要" prop="summary" :title-span="3" :item-span="21">
              <el-input v-model="drawerProps.row!.summary" clearable></el-input>
            </form-item>
          </el-row>
          <el-row>
            <form-item title="需求背景" prop="background" :title-span="3" :item-span="21">
              <el-input v-model="drawerProps.row!.background" type="textarea" :rows="3" placeholder="请输入需求背景"></el-input>
            </form-item>
          </el-row>
          <el-row>
            <form-item title="需求类型" prop="type" :title-span="3" :item-span="5">
              <common-select
                placeholder="请选择需求类型"
                data-key="REQ_TYPE"
                :request-api="() => apiService.findClassify('REQ_TYPE')"
                v-model="drawerProps.row!.type"
              ></common-select>
            </form-item>
            <form-item title="JT单号" prop="jt_no" :title-span="3" :item-span="5">
              <el-input v-model="drawerProps.row!.jt_no" clearable></el-input>
            </form-item>
            <form-item title="JT提单日期" prop="jt_date" :title-span="3" :item-span="5">
              <el-date-picker
                type="date"
                v-model="drawerProps.row!.jt_date"
                placeholder="请选择"
                value-format="YYYY-MM-DD"
              ></el-date-picker>
            </form-item>
          </el-row>

          <el-row>
            <form-item title="重要性" prop="important" :title-span="3" :item-span="5">
              <el-input-number
                style="width: 100%"
                v-model="drawerProps.row!.important"
                :min="0"
                :max="100"
                controls-position="right"
              />
            </form-item>
            <form-item title="前端工作量" prop="front_workload" :title-span="3" :item-span="5">
              <el-input-number
                style="width: 100%"
                v-model="drawerProps.row!.front_workload"
                :min="0"
                controls-position="right"
              ></el-input-number>
            </form-item>
            <form-item title="后端工作量" prop="back_workload" :title-span="3" :item-span="5">
              <el-input-number
                style="width: 100%"
                v-model="drawerProps.row!.back_workload"
                :min="0"
                controls-position="right"
              ></el-input-number>
            </form-item>
          </el-row>

          <el-row>
            <form-item title="解决方案" prop="solution" :title-span="3" :item-span="21">
              <el-input v-model="drawerProps.row!.solution" type="textarea" :rows="5" placeholder="请输入解决方案"></el-input>
            </form-item>
          </el-row>
          <el-row>
            <form-item title="研发评估" prop="rd_evaluation" :title-span="3" :item-span="21">
              <el-input
                v-model="drawerProps.row!.rd_evaluation"
                type="textarea"
                :rows="5"
                placeholder="请输入研发评估"
              ></el-input>
            </form-item>
          </el-row>
        </el-col>

        <el-col :offset="1" :span="7">
          <group-title title="干系人"></group-title>
          <el-row>
            <form-item title="产品负责人" prop="po" :title-span="8" :item-span="14">
              <user-select placeholder="请选择用户" v-model="drawerProps.row!.po"></user-select>
            </form-item>
            <form-item title="项目对接人" prop="item_verifier" :title-span="8" :item-span="14">
              <el-input v-model="drawerProps.row!.item_verifier" placeholder="请输入项目对接人"></el-input>
            </form-item>
            <form-item title="客户验证人" prop="customer_verifier" :title-span="8" :item-span="14">
              <el-input v-model="drawerProps.row!.customer_verifier" placeholder="请输入客户验证人"></el-input>
            </form-item>
          </el-row>

          <group-title title="关联信息"></group-title>
          <el-row>
            <form-item title="所属产品" prop="productId" :title-span="8" :item-span="14">
              <product-select placeholder="请选择产品" v-model="drawerProps.row!.productId"></product-select>
            </form-item>
            <form-item title="项目" prop="itemId" :title-span="8" :item-span="14">
              <item-dialog-select
                v-model="drawerProps.row!.itemId"
                placeholder="请选择项目"
                @change="handleItemChange"
              ></item-dialog-select>
            </form-item>
            <form-item title="冲刺" prop="sprintId" :title-span="8" :item-span="14">
              <sprint-dialog-select
                v-model="drawerProps.row!.sprintId"
                placeholder="请选择冲刺"
                @change="handleSprintChange"
              ></sprint-dialog-select>
            </form-item>
            <form-item title="状态" prop="state" :title-span="8" :item-span="14">
              <common-select
                placeholder="请选择状态"
                data-key="REQ_STATE"
                :request-api="() => apiService.findClassify('REQ_STATE')"
                v-model="drawerProps.row!.state"
              ></common-select>
            </form-item>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false">取消</el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="UserRequirementDialog">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { UserRequirement } from "./types/userRequirement";
import commonSelect from "@/components/SelectFilter/common-select.vue";
import apiService from "@/api/services/apiService";
import groupTitle from "@/components/application/form/group-title.vue";
import formItem from "@/components/application/form/form-item.vue";
import productSelect from "@/components/SelectFilter/product-select.vue";
import userSelect from "@/components/SelectFilter/user-select.vue";
import itemDialogSelect from "@/components/SelectFilter/item-dialog-select.vue";
import sprintDialogSelect from "@/components/SelectFilter/sprint-dialog-select.vue";
import { useUserStore } from "@/stores/modules/user";

interface DrawerProps {
  title: string;
  tbName: string;
  isView: boolean;
  row: Partial<UserRequirement>;
  api?: (tabName: string, params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  tbName: "",
  row: {}
});

// 表单验证规则
const rules = reactive({
  summary: [{ required: true, message: "请输入需求摘要" }],
  productId: [{ required: true, message: "请选择所属产品" }],
  type: [{ required: true, message: "请选择需求类型" }],
  state: [{ required: true, message: "请选择状态" }],
  po: [{ required: true, message: "请选择产品负责人" }]
});

// 处理项目选择变化
const handleItemChange = (item: any) => {
  // 可以在这里处理项目选择变化的逻辑
  console.log("选中的项目:", item);
};

// 处理冲刺选择变化
const handleSprintChange = (sprint: any) => {
  // 可以在这里处理冲刺选择变化的逻辑
  console.log("选中的冲刺:", sprint);
};

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;

    try {
      if (drawerProps.value.title === "新增") {
        drawerProps.value.row.create_at = new Date();
        drawerProps.value.row.create_user = useUserStore().userInfo._id;
      }

      await drawerProps.value.api!(drawerProps.value.tbName, drawerProps.value.row);

      ElMessage.success(`${drawerProps.value.title}需求成功！`);
      drawerProps.value.getTableList && drawerProps.value.getTableList();
      drawerVisible.value = false;
    } catch (error) {
      console.error(`${drawerProps.value.title}失败:`, error);
      ElMessage.error(`${drawerProps.value.title}失败`);
    }
  });
};

// 暴露方法
defineExpose({
  acceptParams
});
</script>
